'use strict';

/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */

window.addEventListener('load', function() {

(function() {

    var params = v3d.AppUtils.getPageParams();

    var PUZZLES_DIR = '../../puzzles/';
    var logicURL = params.logic ? params.logic : '__LOGIC__visual_logic.js'.replace('__LOGIC__', '');
    var sceneURL = params.load ? params.load : '__URL__Interior Architecture Scene 2.gltf'.replace('__URL__', '');
    if (!sceneURL) {
        console.log('No scene URL specified');
        return;
    }

    // some puzzles can benefit from cache
    v3d.Cache.enabled = true;

    if (v3d.AppUtils.isXML(logicURL)) {
        var logicURLJS = logicURL.match(/(.*)\.xml$/)[1] + '.js';
        new v3d.PuzzlesLoader().loadEditorWithLogic(PUZZLES_DIR, logicURLJS, 
            function() {
                var initOptions = v3d.PL ? v3d.PL.execInitPuzzles().initOptions 
                        : { useFullscreen: true };
                loadScene(sceneURL, initOptions);
            }
        );
    } else if (v3d.AppUtils.isJS(logicURL)) {
        new v3d.PuzzlesLoader().loadLogic(logicURL, function() {
            var initOptions = v3d.PL ? v3d.PL.execInitPuzzles().initOptions 
                    : { useFullscreen: true };
            loadScene(sceneURL, initOptions);
        });
    } else {
        loadScene(sceneURL, { useFullscreen: true });
    }
})();

function loadScene(sceneURL, initOptions) {

    initOptions = initOptions || {};

    var ctxSettings = {};
    if (initOptions.useBkgTransp) ctxSettings.alpha = true;
    if (initOptions.preserveDrawBuf) ctxSettings.preserveDrawingBuffer = true;

    var preloader = initOptions.useCustomPreloader 
            ? createCustomPreloader(initOptions.preloaderProgressCb, 
            initOptions.preloaderEndCb) 
            : new v3d.SimplePreloader({ container: 'container' });
    
    var app = new v3d.App('container', ctxSettings, preloader);
    if (initOptions.useBkgTransp) {
        app.clearBkgOnLoad = true;
        app.renderer.setClearColor(0x000000, 0);
    }

    // namespace for communicating with code generated by Puzzles 
    app.ExternalInterface = {};
    prepareExternalInterface(app);
    
    if (initOptions.preloaderStartCb) initOptions.preloaderStartCb();
    if (initOptions.useFullscreen) {
        initFullScreen();
    } else {
        var fsButton = document.getElementById('fullscreen_button');
        if (fsButton) fsButton.style.display = 'none';
    }

    sceneURL = initOptions.useCompAssets ? sceneURL + '.xz' : sceneURL;
    app.loadScene(sceneURL, function() {
        app.enableControls();
        app.run();

        if (v3d.PE) v3d.PE.updateAppInstance(app);
        if (v3d.PL) v3d.PL.init(app, initOptions);

        runCode(app);
    }, null, function() {
        console.log('Can\'t load the scene ' + sceneURL);
    });

    return app;
}

function createCustomPreloader(updateCb, finishCb) {
    function CustomPreloader() { 
        v3d.Preloader.call(this); 
    }

    CustomPreloader.prototype = Object.assign(Object.create(v3d.Preloader.prototype), {
        onUpdate: function(percentage) { 
            v3d.Preloader.prototype.onUpdate.call(this, percentage);
            if (updateCb) updateCb(percentage);
        },
        onFinish: function() {
            v3d.Preloader.prototype.onFinish.call(this);
            if (finishCb) finishCb();
        }
    });
        
    return new CustomPreloader();
}

function initFullScreen() {

    var fsButton = document.getElementById('fullscreen_button');
    if (!fsButton) return;

    if (document.fullscreenEnabled || 
            document.webkitFullscreenEnabled ||
            document.mozFullScreenEnabled ||
            document.msFullscreenEnabled)
        fullscreen_button.style.display = 'inline';

    fullscreen_button.addEventListener('click', function(event) {
        event.stopPropagation();
        if (document.fullscreenElement || 
                document.webkitFullscreenElement ||
                document.mozFullScreenElement ||
                document.msFullscreenElement) {
            exitFullscreen();
        } else
            requestFullscreen(document.body);
    });

    function changeFullscreen() {
        if (document.fullscreenElement || 
                document.webkitFullscreenElement ||
                document.mozFullScreenElement ||
                document.msFullscreenElement)
            fullscreen_button.className = 'fullscreen-close';
        else
            fullscreen_button.className = 'fullscreen-open';
    }

    document.addEventListener('webkitfullscreenchange', changeFullscreen);
    document.addEventListener('mozfullscreenchange', changeFullscreen);
    document.addEventListener('msfullscreenchange', changeFullscreen);
    document.addEventListener('fullscreenchange', changeFullscreen);

    function requestFullscreen(elem) {
        if (elem.requestFullscreen)
            elem.requestFullscreen();
        else if (elem.mozRequestFullScreen)
            elem.mozRequestFullScreen();
        else if (elem.webkitRequestFullscreen) 
            elem.webkitRequestFullscreen();
        else if (elem.msRequestFullscreen)
            elem.msRequestFullscreen();
    }
    
    function exitFullscreen() {
        if (document.exitFullscreen)
            document.exitFullscreen();
        else if (document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if (document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if (document.msExitFullscreen)
            document.msExitFullscreen();
    }
}

function prepareExternalInterface(app) {
    // register functions in the app.ExternalInterface to call them from Puzzles, e.g:
    // app.ExternalInterface.myJSFunction = function() {
    //     console.log('Hello, World!');
    // }

    app.ExternalInterface.showLiving = function() {
        document.querySelector('#livingitems').style.display = "block";
        document.querySelector('#diningitems').style.display = "none";
        document.querySelector('#kitchenitems').style.display = "none";
        document.querySelector('#miscitems').style.display = "none";
        for (var i = document.querySelectorAll('.categories').length - 1; i >= 0; i--) {
                    document.querySelectorAll('.categories')[i].style.display = "none";
                }        
    }

    app.ExternalInterface.showDining = function() {
        document.querySelector('#livingitems').style.display = "none";
        document.querySelector('#diningitems').style.display = "block";
        document.querySelector('#kitchenitems').style.display = "none";
        document.querySelector('#miscitems').style.display = "none";
        for (var i = document.querySelectorAll('.categories').length - 1; i >= 0; i--) {
                    document.querySelectorAll('.categories')[i].style.display = "none";
                }        
    }

    app.ExternalInterface.showKitchen = function() {
        document.querySelector('#livingitems').style.display = "none";
        document.querySelector('#diningitems').style.display = "none";
        document.querySelector('#kitchenitems').style.display = "block";
        document.querySelector('#miscitems').style.display = "none";
        for (var i = document.querySelectorAll('.categories').length - 1; i >= 0; i--) {
                    document.querySelectorAll('.categories')[i].style.display = "none";
                }        
    }

    app.ExternalInterface.showMisc = function() {
        document.querySelector('#livingitems').style.display = "none";
        document.querySelector('#diningitems').style.display = "none";
        document.querySelector('#kitchenitems').style.display = "none";
        document.querySelector('#miscitems').style.display = "block";
        for (var i = document.querySelectorAll('.categories').length - 1; i >= 0; i--) {
                    document.querySelectorAll('.categories')[i].style.display = "none";
                }        
    }

}

function runCode(app) {
    // add your code here, e.g. console.log('Hello, World!');

    var categories = document.querySelectorAll(".categories");

    var living = document.getElementById("living");
    var dining = document.getElementById("dining");
    var kitchen= document.getElementById("kitchen");
    var misc = document.getElementById("misc");

    var back = document.querySelectorAll(".back");
    
    living.addEventListener("click", function(){

        app.ExternalInterface.flyLiving();
        livingitems.style.display = "block";
        for (var i = categories.length - 1; i >= 0; i--) {
            categories[i].style.display = "none";
        }
    });

    dining.addEventListener("click", function(){

        app.ExternalInterface.flyDining();
        diningitems.style.display = "block";
        for (var i = categories.length - 1; i >= 0; i--) {
            categories[i].style.display = "none";
        }
    });

    kitchen.addEventListener("click", function(){

        app.ExternalInterface.flyKitchen();
        kitchenitems.style.display = "block";
        for (var i = categories.length - 1; i >= 0; i--) {
            categories[i].style.display = "none";
        }
    });

    misc.addEventListener("click", function(){

        app.ExternalInterface.flyMisc();
        miscitems.style.display = "block";
        for (var i = categories.length - 1; i >= 0; i--) {
            categories[i].style.display = "none";
        }
    });



    
    back[0].addEventListener("click", function(){

        
        livingitems.style.display = "none";
        diningitems.style.display = "none";
        kitchenitems.style.display = "none";
        miscitems.style.display = "none";
        for (var i = categories.length - 1; i >= 0; i--) {
            categories[i].style.display = "block";
        }
    });
    back[1].addEventListener("click", function(){

        
        livingitems.style.display = "none";
        diningitems.style.display = "none";
        kitchenitems.style.display = "none";
        miscitems.style.display = "none";
        for (var i = categories.length - 1; i >= 0; i--) {
            categories[i].style.display = "block";
        }
    });
    back[2].addEventListener("click", function(){

        
        livingitems.style.display = "none";
        diningitems.style.display = "none";
        kitchenitems.style.display = "none";
        miscitems.style.display = "none";
        for (var i = categories.length - 1; i >= 0; i--) {
            categories[i].style.display = "block";
        }
    });
    back[3].addEventListener("click", function(){

        
        livingitems.style.display = "none";
        diningitems.style.display = "none";
        kitchenitems.style.display = "none";
        miscitems.style.display = "none";
        for (var i = categories.length - 1; i >= 0; i--) {
            categories[i].style.display = "block";
        }
    });


    // LIVING: 
    document.querySelector('#sofaplus').addEventListener('click', function() {
        app.ExternalInterface.CouchNext();
    });
    document.querySelector('#sofaminus').addEventListener('click', function() {
        app.ExternalInterface.CouchPrevious();
    });

    document.querySelector('#sofa2plus').addEventListener('click', function() {
        app.ExternalInterface.Couch2Next();
    });
    document.querySelector('#sofa2minus').addEventListener('click', function() {
        app.ExternalInterface.Couch2Previous();
    });

    document.querySelector('#cabinetplus').addEventListener('click', function() {
        app.ExternalInterface.CabinetNext();
    });
    document.querySelector('#cabinetminus').addEventListener('click', function() {
        app.ExternalInterface.CabinetPrevious();
    });

    document.querySelector('#cabinet2plus').addEventListener('click', function() {
        app.ExternalInterface.Cabinet2Next();
    });
    document.querySelector('#cabinet2minus').addEventListener('click', function() {
        app.ExternalInterface.Cabinet2Previous();
    });

    document.querySelector('#carpetplus').addEventListener('click', function() {
        app.ExternalInterface.CarpetNext();
    });
    document.querySelector('#carpetminus').addEventListener('click', function() {
        app.ExternalInterface.CarpetPrevious();
    });

    // DINING:
    document.querySelector('#tableplus').addEventListener('click', function() {
        app.ExternalInterface.TableNext();
    });
    document.querySelector('#tableminus').addEventListener('click', function() {
        app.ExternalInterface.TablePrevious();
    });

     document.querySelector('#chairseatplus').addEventListener('click', function() {
        app.ExternalInterface.ChairseatNext();
    });
    document.querySelector('#chairseatminus').addEventListener('click', function() {
        app.ExternalInterface.ChairseatPrevious();
    });

    document.querySelector('#chairframeplus').addEventListener('click', function() {
        app.ExternalInterface.ChairframeNext();
    });
    document.querySelector('#chairframeminus').addEventListener('click', function() {
        app.ExternalInterface.ChairframePrevious();
    });

    document.querySelector('#lampplus').addEventListener('click', function() {
        app.ExternalInterface.LampNext();
    });
    document.querySelector('#lampminus').addEventListener('click', function() {
        app.ExternalInterface.LampPrevious();
    });

    // KITCHEN:
    document.querySelector('#kitchentopplus').addEventListener('click', function() {
        app.ExternalInterface.TopNext();
    });
    document.querySelector('#kitchentopminus').addEventListener('click', function() {
        app.ExternalInterface.TopPrevious();
    });

     document.querySelector('#kitchenbottomplus').addEventListener('click', function() {
        app.ExternalInterface.BottomNext();
    });
    document.querySelector('#kitchenbottomminus').addEventListener('click', function() {
        app.ExternalInterface.BottomPrevious();
    });

     document.querySelector('#countertopplus').addEventListener('click', function() {
        app.ExternalInterface.CountertopNext();
    });
    document.querySelector('#countertopminus').addEventListener('click', function() {
        app.ExternalInterface.CountertopPrevious();
    });

    // MISC:
     document.querySelector('#floorplus').addEventListener('click', function() {
        app.ExternalInterface.FloorNext();
    });
    document.querySelector('#floorminus').addEventListener('click', function() {
        app.ExternalInterface.FloorPrevious();
    });
}

});